import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { AtInput }  from 'taro-ui'
import './index.less'

@connect(({ login }) => ({ login }))
export default class Login extends Component {

  constructor () {
      super(...arguments)
      this.state = {
        value15: '',
        value2:'',
        disabled: false,
        second: 60
      }
    }
    showTipText () {
      return this.state.disabled ? `${this.state.second}s后重试` : '发送验证码'
    }

    sendCode () {
      console.log('login index sendCode');
      const { dispatch } = this.props;
      const { value2 }=this.state;
      console.log('index sendCode',value2);
      dispatch({
        type: 'login/send',
        payload:value2
      })
      console.log('sendCode dispatch');
      if (this.state.disabled) return
      this.setState({
        disabled: true
      });
      // 倒计时
      const timer = setInterval(() => {
        if (this.state.second > 0) {
          this.setState({
            second: this.state.second - 1
          })
        } else {
          this.setState({
            second: 60,
            disabled: false
          })
          clearInterval(timer)
        }
      }, 1000)
    }
    handleInput (stateName, value) {
      this.setState({
        [stateName]: value
      })
    }
    handleClick () {
      Taro.showToast({
        title: '已发送验证码',
        icon: 'success',
        duration: 2000
      })
    }
  handle(){
    console.log('login index sendCode');
    const { dispatch } = this.props;
    const {value2} =this.state;
    const { value15 }=this.state;
    console.log('index sendCode',value15);
    dispatch({
      type: 'login/login',
      payload:{
        phone:value2,
        code:value15
      }
    })

  }
  // Taro.redirectTo({url:'../home/index'})
  config = {
    navigationBarTitleText: ''
  }


  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const {value2}= this.state;
    console.log('render phone', value2);
    return (
      <View className='Login'>
        <Text className='denglu'>绑定手机号</Text>
        <View className='input'>
          <View className='oneLine'>
            <AtInput
              name='value2'
              title='手机号'
              type='phone'
              placeholder='请输入手机号'
              value={this.state.value2}
              onChange={this.handleInput.bind(this, 'value2')}
              adjustPosition
            />
          </View>

          <View className='oneLine'>
            <AtInput
              name='value15'
              type='number'
              adjustPosition
              clear
              placeholder='请输入验证码'
              value={this.state.value15}
              onChange={this.handleInput.bind(this, 'value15')}
            >
            {value2.length!==0 ? (<View
              style={{
                'color': this.state.disabled ? '#FF4949' : '',
                'fontSize': '16px',
                'width': '90px'
              }}
              //onClick={this.sendCode.bind(this)}
              onClick={this.sendCode.bind(this)}
            >
              {this.showTipText()}
            </View>):'发送验证码'}

            </AtInput>
          </View>
        </View>
        <View className='Bottom'>
          <Button
            onClick={this.handle}
            // open-type='switchTab'
            hover-class='none'
            className='bottom'
          >
            <Text className='dl'>绑定</Text>
          </Button>
        </View>
      </View>
    )
  }
}
